<template>
  <top-navbar title="订单详情" />
  <div class="payDetail min-h-screen from-hex-FFFFFF to-hex-F5F5F5 bg-gradient-to-b px-32rpx">
    <div class="mb-44rpx mt-38rpx box-border flex items-center justify-between pl-4rpx">
      <div>
        <div class="mb-18rpx flex items-center">
          <text v-if="consigneeName" class="text-28rpx font-600 text-hex-333333">{{ consigneeName }} {{ consigneeMobile }}</text>
        </div>
        <div v-if="consigneeDetailAddress" class="flex items-center text-24rpx text-hex-5A736A">
          <image
            :src="`${cdnUrl}/svgicons/tea/position.svg${imgVersion}`"
            mode="scaleToFill"
            class="h-50rpx w-50rpx -ml-10rpx"
          />
          {{ consigneeDetailAddress }}
        </div>
      </div>
      <!-- <image
        :src="`${cdnUrl}/svgicons/home/more.svg${imgVersion}`"
        mode="scaleToFill"
        class="h-40rpx w-40rpx"
      /> -->
    </div>
    <div class="boxShadow mb-32rpx box-border rounded-32rpx bg-hex-ffffff p-32rpx">
      <!-- <div v-if="orderDetail.orderStatus===0"
           class="mb-32rpx flex justify-between border-2rpx border-transparent border-b-hex-F5F5F5 border-solid pb-32rpx">
        <div class="text-28rpx text-hex-333333">待支付</div>
      </div>
      <div v-if="orderDetail.orderStatus===1"
           class="mb-32rpx flex justify-between border-2rpx border-transparent border-b-hex-F5F5F5 border-solid pb-32rpx">
        <div class="text-28rpx text-hex-333333">已取消</div>
      </div>
      <div v-if="orderDetail.orderStatus===3"
           class="mb-32rpx flex justify-between border-2rpx border-transparent border-b-hex-F5F5F5 border-solid pb-32rpx">
        <div class="text-28rpx text-hex-333333">已完成</div>
        <div class="flex items-center text-28rpx font-600 text-hex-ABCD03">
          取餐码：{{ orderDetail. pickUpNumber }}
        </div>
      </div>
      <div v-if="orderDetail.orderStatus===2"
           class="mb-32rpx flex justify-between border-2rpx border-transparent border-b-hex-F5F5F5 border-solid pb-32rpx">
        <div class="text-28rpx text-hex-333333">进行中</div>
        <div class="flex items-center text-28rpx font-600 text-hex-ABCD03">
          取餐码：{{ orderDetail. pickUpNumber }}
        </div>
      </div>
      <div v-if="orderDetail.orderStatus===4"
           class="mb-32rpx flex justify-between border-2rpx border-transparent border-b-hex-F5F5F5 border-solid pb-32rpx">
        <div class="text-28rpx text-hex-333333">退款中</div>
        <div class="flex items-center text-28rpx font-600 text-hex-ABCD03">
          取餐码：{{ orderDetail. pickUpNumber }}
        </div>
      </div>
      <div v-if="orderDetail.orderStatus===5"
           class="mb-32rpx flex justify-between border-2rpx border-transparent border-b-hex-F5F5F5 border-solid pb-32rpx">
        <div class="text-28rpx text-hex-333333">已取消</div>
      </div> -->
      <div
        v-for="item in orderDetail.childList"
        class="mb-32rpx flex justify-between"
      >
        <div class="w-90% flex">
          <div class="mr-24rpx h-180rpx w-180rpx flex items-center justify-center rounded-26rpx bg-hex-F5F3F0">
            <image
              :src="item.productImage"
              mode="scaleToFill"
              class="h-128rpx w-95rpx"
            />
          </div>
          <div class="w-70% flex flex-col justify-between">
            <div class="text-28rpx font-600 text-hex-333333">{{ item.productName }}</div>
            <div class="flex items-center text-24rpx text-hex-7C8699">
              <div>{{ item.specs }}</div>
            </div>
          </div>
        </div>
        <div class="w-10% flex flex-col justify-between">
          <div>
            <div class="mb-4rpx text-28rpx text-hex-333333">¥{{ item.flowPrice }}</div>
            <!-- <div class="text-24rpx text-hex-999999 line-through">¥29</div> -->
          </div>
          <div class="text-24rpx text-hex-999999">x{{ item.productQuantity }}</div>
        </div>
      </div>
      <div class="relative mb-36rpx mt-56rpx border-2rpx border-transparent border-b-hex-F5F5F5 border-solid pb-34rpx">
        <div class="mb-56rpx flex justify-between">
          <div class="text-28rpx text-hex-333333">配送费</div>
          <div class="flex items-center text-28rpx text-hex-333333">
            ¥{{ orderDetail.deliveryAmount }}
          </div>
        </div>
        <div class="flex justify-between">
          <div class="text-28rpx text-hex-333333">共优惠</div>
          <div class="flex items-center text-24rpx text-hex-ff4d4e">
            <text v-if="orderDetail.orderTotalDiscountAmount">-￥{{ orderDetail.orderTotalDiscountAmount }}</text>
            <text v-else class="text-hex-333">暂无优惠</text>
            <image
              :src="`${cdnUrl}/imgs/tea/more.png${imgVersion}`"
              mode="scaleToFill"
              class="h-32rpx w-32rpx"
            />
          </div>
        </div>
        <div class="absolute h-36rpx w-36rpx rounded-50% bg-hex-F5F5F5 -bottom-18rpx -left-54rpx" />
        <div class="absolute h-36rpx w-36rpx rounded-50% bg-hex-F5F5F5 -bottom-18rpx -right-54rpx" />
      </div>
      <div
        v-if="orderDetail.totalQuantity"
        class="mb-32rpx box-border border-2rpx border-transparent border-b-hex-F5F5F5 border-solid pb-32rpx text-right text-28rpx text-hex-333333">
        共{{ orderDetail.totalQuantity }}件商品,小计¥{{ orderDetail.payAmount }}
      </div>
      <div class="box-border flex justify-between rounded-24rpx bg-hex-ffffff text-28rpx text-hex-333333">
        <div>备注</div>
        <div v-if="orderDetail.remark">{{ orderDetail.remark }}</div>
        <div>
          <image
            :src="`${cdnUrl}/imgs/tea/more.png${imgVersion}`"
            mode="scaleToFill"
            class="h-32rpx w-32rpx"
          />
        </div>
      </div>
    </div>
    <div class="boxShadow box-border rounded-24rpx bg-hex-ffffff p-32rpx text-28rpx text-hex-333333">
      <div class="mb-32rpx flex justify-between">
        <div class="text-28rpx text-hex-333333">订单编号</div>
        <div class="flex text-24rpx">
          <div v-if="orderDetail.businessId" class="text-hex-7c8699">{{ orderDetail.businessId }}</div>
          <div class="mx-24rpx h-24rpx w-2rpx bg-hex-7c8699" />
          <div class="text-hex-333333" @click="copyAddress(orderDetail.businessId)">复制</div>
        </div>
      </div>
      <div class="mb-32rpx flex justify-between">
        <div class="text-28rpx text-hex-333333">下单时间</div>
        <div class="flex text-24rpx">
          <div v-if="orderDetail.createTime" class="text-hex-7c8699">{{ formateTime(orderDetail.createTime) }}</div>
        </div>
      </div>
      <div class="flex justify-between">
        <div class="text-28rpx text-hex-333333">发货时间</div>
        <div class="flex text-24rpx">
          <div v-if="orderDetail.createTime" class="text-hex-7c8699">{{ formateTime(orderDetail.createTime) }}</div>
        </div>
      </div>
    </div>
    <div v-if="mallOrderStatus[orderDetail.showStatus] !== '已取消'"
         class="activeclass fixed bottom-0 left-0 right-0 h-136rpx rounded-t-32rpx bg-hex-ffffff px-32rpx pt-32rpx">
      <!-- 待支付操作 -->
      <div v-if="mallOrderStatus[orderDetail.showStatus] === '待支付'" class="mb-32rpx w-100% text-28rpx">
        <div class="flex items-center">
          <div class="text-28rpx text-hex-7C8699" @click.stop="cancelOrder(orderDetail.businessId)">取消订单</div>
          <div class="ml-26rpx flex flex-1 justify-end">
            <div
              class="h-72rpx w-198rpx border-2rpx border-hex-7C8699 rounded-72rpx border-solid text-center leading-72rpx text-hex-7C8699"
              @click="goUpdateAddress">
              修改地址
            </div>
            <div class="ml-32rpx h-72rpx w-198rpx border-2rpx border-hex-ABCD03 rounded-72rpx border-solid text-center leading-72rpx text-hex-ABCD03"
                 @click.stop="goPay(orderDetail.businessId)">
              立即支付
            </div>
          </div>
        </div>
      </div>
      <div v-else-if="mallOrderStatus[orderDetail.showStatus] === '待发货'" class="mb-32rpx w-100% text-28rpx">
        <div class="flex items-center">
          <div class="text-28rpx text-hex-7C8699" @click.stop="navTo(`/pages-shop/afterSalesApplication?businessId=${orderDetail.businessId}&refundAmount=${orderDetail.payAmount}`)">申请售后</div>
          <div class="ml-26rpx flex flex-1 justify-end">
            <div class="h-72rpx w-198rpx border-2rpx border-hex-7C8699 rounded-72rpx border-solid text-center leading-72rpx text-hex-7C8699"
                 @click.stop="remind">提醒发货</div>
            <div
              class="ml-32rpx h-72rpx w-198rpx border-2rpx border-hex-ABCD03 rounded-72rpx border-solid text-center leading-72rpx text-hex-ABCD03"
              @click.stop="goUpdateAddress">修改地址</div>
          </div>
        </div>

      </div>
      <div v-else-if="mallOrderStatus[orderDetail.showStatus] === '待收货'" class="mb-32rpx w-100% text-28rpx">
        <div class="ml-26rpx flex flex-1 justify-end">
          <div class="h-72rpx w-198rpx border-2rpx border-hex-7C8699 rounded-72rpx border-solid text-center leading-72rpx text-hex-7C8699">查看物流</div>
          <div class="ml-32rpx h-72rpx w-198rpx border-2rpx border-hex-ABCD03 rounded-72rpx border-solid text-center leading-72rpx text-hex-ABCD03"
               @click.stop="confirmDelivery(orderDetail.businessId)">确定收货</div>
        </div>
      </div>
      <div v-else-if="mallOrderStatus[orderDetail.showStatus] === '已完成'" class="mb-32rpx w-100% text-28rpx">
        <!-- <div class="flex items-center justify-between bg-hex-F5F5F5 p-24rpx">
              <span class="text-24rpx text-hex-E36043">等待商家处理</span>
              <span class="text-24rpx text-hex-7C8699">申请事件 2023-7-19</span>
            </div> -->
        <div class="mt-24rpx flex items-center">
          <div class="text-28rpx text-hex-7C8699" @click.stop="navTo(`/pages-shop/afterSalesApplication?businessId=${orderDetail.businessId}&refundAmount=${orderDetail.payAmount}`)">申请售后</div>
          <div class="ml-26rpx flex flex-1 justify-end">
            <div
              class="ml-32rpx h-72rpx w-198rpx border-2rpx border-hex-ABCD03 rounded-72rpx border-solid text-center leading-72rpx text-hex-ABCD03"
              @click.stop="navTo(`/pages-tea/handleComments?businessId=${orderDetail.businessId}&appType=3`)">评价</div>
          </div>
        </div>
      </div>
      <div v-else class="mb-32rpx w-100% text-28rpx">
        <div class="flex items-center">
          <div class="ml-26rpx flex flex-1 justify-end">
            <div class="h-72rpx w-198rpx border-2rpx border-hex-7C8699 rounded-72rpx border-solid text-center leading-72rpx text-hex-7C8699"
                 @click.stop="navTo(`/pages-mine/aftersales-details?businessId=${orderDetail.businessId}`)">查看售后</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { useAddressStore } from '@/stores/address'
import { useUserStore } from '@/stores/user'

let orderFinish: any = $ref(false)
let paySuccess: any = $ref(true)
let businessId: any = $ref('')
const userStores = useUserStore()
let addressStores: any = useAddressStore()
onLoad((options) => {
  if (options) {
    businessId = options.businessId
  }
})



//提醒发货
const remind = async () => {
  uni.showToast({ title: '已提醒', icon: 'none' })
}

let orderDetail: any = $ref({})
let consigneeDetailAddress: any = $ref('')
let consigneeMobile: any = $ref('')
let consigneeName: any = $ref('')
const getOrderDetail = async () => {
  const reqData = {
    method: 'post',
    data: { 'businessId': businessId },
    headers: {
      AppType: 3,
      UserId: userStores.user.id,
    },
  }
  const { status, data, error } = await Fetch('/qqyapi/order/order/detail', reqData)
  if (status !== 200 || data.code !== 0) {
    return
  }
  if (data.code === 0) {
    let tempDetail: any = {}
    tempDetail = data?.result
    orderDetail = tempDetail
    orderDetail.showStatus = (orderDetail.orderStatus).toString() + (orderDetail.deliveryStatus).toString() + (orderDetail.afterSaleState).toString()
    consigneeDetailAddress = orderDetail.consigneeDetailAddress
    consigneeMobile = orderDetail.consigneeMobile
    consigneeName = orderDetail.consigneeName
    // console.log(tempDetail, 'tempDetail')
    let tempBoolean: any = ''
    tempBoolean = orderDetail.childList.some((item) => {
      return item.evaluationState === 1
    })
    if (tempBoolean) {
      orderDetail.orderEvaluationStatus = 1
    } else {
      orderDetail.orderEvaluationStatus = 0
    }
  }
}
// 复制粘贴
const copyAddress = (text) => {
  uni.setClipboardData({
    //去找上面的数据
    data: text,
    success(res) {
      uni.showToast({
        title: '复制成功',
      })
    },
    fail(res) {
      uni.showToast({
        title: '复制失败',
      })
    },
  })
}
// 时间替换
const formateTime = (time) => {
  return time.replace('T', ' ')
}
//立即支付
const goPay = async (bussinessId) => {
  const reqData = {
    method: 'post',
    data: {
      orderBusinessId: bussinessId,
    },
  }
  uni.showLoading({ title: 'Loading...' })
  const { data, status, error } = await Fetch('/qqyapi/payment/checkoutCounter/prepay', reqData)
  if (status === 200 && data.code === 0) {
    let params = data.result
    uni.requestPayment({
      'provider': 'wxpay', // 服务提提供商
      'orderInfo': {},
      'nonceStr': params.nonceStr,
      'package': params.packageVal,
      'signType': params.signType,
      'paySign': params.paySign,
      'timeStamp': params.timeStamp,
      success() {
        uni.hideLoading()
        getOrderDetail()
      },
      fail() {
        uni.hideLoading()
        navTo('/pages-mine/order')
      },
    })
  }
}
// 再来一单
const anotherOrder = async (id) => {
  const reqData = {
    method: 'post',
    data: {
      'orderId': id,
      trolleyType: '2',
      userId: userStores.user.id,
    },
    headers: { UserId: userStores.user.id },
  }
  const { status, data, error } = await Fetch('/qqyapi/order/trolley/anotherOrder', reqData)
  if (status !== 200 || data.code !== 0) {
    return
  }
  if (data.code === 0) {
    // navTo(`/pages-tea/comfirmOrder?storeId=${addressStores.selectStores.id}`)
    uni.switchTab({ url: '/pages/index' })
    uni.$emit('teaIndexOpenTeaGoodsCarPop')
  }
}
// 退款
const refundMoney = async (businessid) => {
  const reqData = {
    method: 'post',
    data: {
      'businessId': businessid,
    },
    headers: {
      AppType: 2,
      UserId: userStores.user.id,
    },
  }
  uni.showLoading({ title: 'Loading...' })
  const { status, data, error } = await Fetch('/qqyapi/order/order/refund', reqData)
  if (status !== 200 || data.code !== 0) {
    uni.hideLoading()
    return
  }
  if (data.code === 0) {
    uni.hideLoading()
    getOrderDetail()
    uni.showToast({
      title: '已取消',
      icon: 'success',
    })
  }
}
// 取消订单
const cancelOrder = async (id) => {
  const reqData = {
    method: 'post',
    data: {
      'businessId': businessId,
    },
    headers: {
      UserId: userStores.user.id,
    },
  }
  uni.showLoading({ title: 'Loading...' })
  const { status, data, error } = await Fetch('/qqyapi/order/order/cancelOrder', reqData)
  if (status !== 200 || data.code !== 0) {
    uni.hideLoading()
    return
  }
  if (data.code === 0) {
    uni.hideLoading()
    getOrderDetail()
  }
}
//确认收货
const confirmDelivery = async (businessid) => {
  uni.showLoading({ title: 'Loading...' })
  const reqData = {
    method: 'post',
    data: {
      'businessId': businessid,
    },
    headers: {
      UserId: userStores.user.id,
    },
  }
  const { status, data, error } = await Fetch('/qqyapi/order/order/confirmDelivery', reqData)
  if (status !== 200 || data.code !== 0) {
    uni.hideLoading()
    return
  }
  if (data.code === 0) {
    uni.hideLoading()
    getOrderDetail()
  }
}
let endSec = $ref(true)
const getCountDown = (time, type) => {

  let dateTime: any = new Date(time).getTime() + 1000 * 45
  let curTime: any = new Date().getTime()
  let target: any = dateTime - curTime
  if (type === 'm') {
    if (target > 0) {
      let minutes = Math.floor((target / 1000 / 60) % 60)
      return minutes
    } else {
      return '0'
    }
  }
  if (type === 's') {
    if (target > 0) {
      let seconds = Math.floor((target / 1000) % 60)
      return seconds
    } else {
      endSec = false
      return '0'
    }
  }
}
const timeup = () => {
  endSec = false
}

const goUpdateAddress = () => {
  navTo('/pages-shop/deliveryWay?isUpdateAddress=1')
}
let updateAddressData: any = $ref({})
// 修改地址
const updateAddress = async () => {
  const reqData = {
    method: 'post',
    data: {
      'businessId': businessId,
      'consigneeDetailAddress': `${updateAddressData.address}${updateAddressData.detail}`,
      'consigneeMobile': updateAddressData.mobile,
      'consigneeName': updateAddressData.name,
    },
    headers: {
      AppType: 3,
      UserId: userStores.user.id,
    },
  }
  const { status, data, error } = await Fetch('/qqyapi/order/order/updDeliveryAddress', reqData)
  if (status !== 200 || data.code !== 0) {
    return
  }
  if (data.code === 0) {
    uni.showToast({
      title: '修改成功',
      icon: 'success',
    })
    getOrderDetail()
  }
}

onMounted(() => {
  getOrderDetail()
})
watchEffect(() => {
  uni.$on('shopOrderDetail-updateAddress', (item) => {
    // consigneeName = item.name
    // consigneeMobile = item.mobile
    // consigneeDetailAddress = `${item.address}${item.detail}`
    updateAddressData = item
    updateAddress()
  })
})
</script>

<!-- <route lang="json">
{"style":{"disableScroll":true}}
</route> -->

<style lang="scss" scoped>
.payDetail{
  .font-numberFont{
    font-family:'DingTalk JinBuTi';
  }

  .boxShadow{
    box-shadow: 0rpx 8rpx 40rpx 0rpx rgb(0 0 0 / 6%);
  }
}
</style>
